<template>
    <div class="cardBox">
        <div class="theCount">
            <span class="count">{{ count }}</span>
        </div>
        <span :class="spanclass" class="count" id="name">{{ countText }}</span>
    </div>
</template>

<script>

    export default {
        name:'card',
        data(){
            return {
                
            }
        },
        props:['count','countText','spanclass']
    }
</script>

<style scoped>
     .cardBox{
        width: 260px;
        height: 150px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: stretch;
     }
     .theCount{
        background: white;
        flex: 1;
        display: flex;
        align-items: center;
     }
     .count{
        display: flex;
        padding: 10px 20px;
        font-size: 35px;
     }
     #name{
        font-size: 20px;
     }
     .user{
        background: #7761a7;
        color: white;
     }
     .add{
        background: #19b698;
        color: white;
     }
     .login{
        background: #3d566d;
        color: white;
     }
     .online{
        background: #ea6153;
        color: white;
     }
</style>